/* eslint-disable no-unused-vars */
/* eslint-disable eqeqeq */
import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'umi'
import { SaveOutlined } from '@ant-design/icons'
import { withI18n } from '@lingui/react'
import { Card, Form, Input, Button, message, Select, Modal } from 'antd'
import { tailLayout, layoutModel } from '@/utils/helper'
import styles from './index.less'
import '@/utils/index.less'
import { get, post, put } from '@/services/https'
import { NAME, USERPWD } from '@/utils/regExp'
import { UploadOutlined } from '@ant-design/icons'
import Upload from '@/utils/Upload'
import { merge } from 'lodash'
import base64 from '@/utils/base64'
let base = new base64()
const { Option } = Select
const { TextArea } = Input

// 1超级管理员 2系统管理员 3审计管理员 4安全管理员
@withI18n()
@connect(({ post, loading }) => ({ post, loading }))
class userDer extends React.Component {
  state = {
    fileName: '',
    pyCode: '',
    xmlCode: '',
    visible: false,
    mockData: [],
    mockDataclass: [],
    designwork_content: '',
  }
  formRef = React.createRef()
  iframeRef = React.createRef()
  componentDidMount() {
    this.setState({ accessibility: sessionStorage.getItem('accessibility') })
    window.addEventListener('message', function (ev) {
      if (ev.data.code === 104) {
        that.setState({
          fileName: ev.data.param.fileName,
          pyCode: ev.data.param.pyCode,
          xmlCode: ev.data.param.xmlCode,
        })
      }
    })
    if (this.props.match.params.id && this.props.match.params.id != 0) {
      this.getData(this.props.match.params.id)
    } else {
    }

    let that = this
    setTimeout(() => {
      if (that.props.match.params.id && that.props.match.params.id != 0) {
        that.clFna(4)
      } else {
        that.clFna(3)
      }
    }, 1000)
  }
  getData = (id) => {
    post('designwork/read', { id: id }).then((res) => {
      let data = res.data
      data.designwork_content = window.atob(data.designwork_content)
      this.setState({
        designwork_content: data.designwork_content,
      })
      // this.iframeRef.current.contentWindow.postMessage({ code: 1003, param: { data: data.designwork_content } }, 'https://online.mpython.cn/')
    })
  }
  handleSaveBtn = (values) => {}
  clFna = (key) => {
    if (key == 1) {
      this.props.history.push('/works/Class')
    } else if (key == 3) {
      this.iframeRef.current.contentWindow.postMessage(
        { code: 1001 },
        'https://online.mpython.cn/'
      )
    } else if (key == 4) {
      this.iframeRef.current.contentWindow.postMessage(
        { code: 1003, param: { data: this.state.designwork_content } },
        'https://online.mpython.cn/'
      )
    } else {
      this.props.history.push('/works/Class')
    }
  }
  Derive = () => {
    let that = this
    this.iframeRef.current.contentWindow.postMessage(
      { code: 1005 },
      'https://online.mpython.cn/'
    )
    this.setState({
      visible: true,
    })
  }
  handleCancel = () => {
    this.setState({
      visible: false,
    })
  }
  handleOk = () => {
    const form = this.formRef.current
    var values = form.getFieldsValue([
      'designwork_name',
      'class_id',
      'classroom_id',
    ])
    let data = {
      ...values,
      designwork_content: btoa(this.state.xmlCode), //加密
    }
    if (this.props.match.params.id && this.props.match.params.id != 0) {
      data.id = this.props.match.params.id
      post('designwork/update', data).then((res) => {
        if (res.code === 0) {
          // message.success(i18n.t`The`)
          this.props.history.push('/works/my')
        } else {
          message.error(res.info)
        }
      })
    } else {
      post('designwork/create', data).then((res) => {
        if (res.code === 0) {
          // message.success(i18n.t`The`)

          this.props.history.push('/works/my')
        } else {
          message.error(res.info)
        }
      })
    }
  }
  render() {
    const { location, i18n } = this.props
    const { initialValues, mockData, mockDataclass } = this.state
    const formProps = {
      name: 'basic',
      onFinish: this.handleSaveBtn,
      initialValues,
      ref: this.formRef,
    }

    return (
      <div>
        <div className="ct">
          <div className="ban">
            <div className="tetli">
              {this.props.match.params.id !== 0 ? 'Mython' : 'Mython'}
            </div>
            <div
              style={{
                width: '60px',
                height: '6px',
                background:
                  'linear-gradient( 270deg, rgba(37,111,254,0) 0%, #256FFE 100%)',
              }}
            ></div>
            <div className="add">
              <div
                style={{
                  margin: '15px 0',
                }}
              >
                <Button onClick={() => this.clFna(1)}>返回</Button>
              </div>
            </div>
          </div>
          <div>
            <iframe
              ref={this.iframeRef}
              src="https://online.mpython.cn/"
              width="100%"
              height="800px"
              frameborder="0"
              title="mPython"
              id="iframeContent"
            ></iframe>
          </div>
        </div>
      </div>
    )
  }
}
userDer.propTypes = {
  post: PropTypes.object,
  loading: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
}
export default userDer
